{extend name='layout:app' /}

{block name='css'}
<style>
    .el-message-box {
        min-width: 85%;
    }
</style>
<!--<link rel="stylesheet" href="__STATIC__/css/help.css">-->
<style>
    .contact-info{
        margin-top: 40px;
    }
    .item{
        line-height: 60px;
        letter-spacing: 2px;
        font-size: 18px;
        font-weight: normal;
        border-bottom: 3px solid white;
    }
    .item img{
        width: 5%;
        margin-left: 25px;
    }
    .item input{
        margin-left: 28px;
    }
    p{
        text-indent: 15px;
    }
</style>
{/block}

{block name='content'}
<div id="app">
    <div class="nav">
        <i class="el-icon-arrow-left icon_left" @click="back"></i>
        <div>投诉</div>
        <i class="iconfont icon-home icon_right" @click="home"></i>
    </div>
    <div class="contact-info">
        <div class="item" style="text-align: center;font-size: 16px">
            投诉内容直达监管机构，10分钟内处理
        </div>
        <div class="item" @click="sendMsg(1)">
            <p>1、资费投诉</p>
        </div>
        <div class="item " @click="sendMsg(2)">
            <p >2、快递公司投诉</p>
        </div>
        <div class="item" @click="sendMsg(3)">
            <p>3、服务投诉</p>
        </div>
        <div class="item" @click="sendMsg(4)">
            <p>4、建议</p>
        </div>
        <template>
<!--            <el-button type="text" @click="areaText = true">发表</el-button>-->

            <el-dialog title="内容" :visible.sync="areaText" center width="90%" :close-on-click-modal="shadow">
                <div style="margin-bottom: 5%;" v-if="type == 2">
                    <span>快递公司 ： </span>
                    <select class="myselect" v-model="company" style="border-color: #C6C6C6;border-radius: 5px;width: 115px;padding: 5px; text-align: center;justify-content: center;">
                        <option value="" hidden>选择快递公司</option>
                        <option value="中通">中 通</option>
                        <option value="申通">申 通</option>
                        <option value="韵达">韵 达</option>
                        <option value="圆通">圆 通</option>
                        <option value="汇通">汇 通</option>
                        <option value="顺丰">顺 丰</option>
                        <option value="邮政">邮 政</option>
                    </select>
                </div>
                <div style="margin-bottom: 5%;" v-if="type == 3">
                    <span>服务工号 ： </span>
                    <select class="myselect" v-model="num" style="border-color: #C6C6C6;border-radius: 5px;width: 100px;padding: 5px; text-align: center;justify-content: center;">
                        <option value ="" hidden>选择工号</option>
                        <option value ="客服1">客服1</option>
                        <option value ="客服2">客服2</option>
                        <option value ="工号001">工号001</option>
                        <option value ="工号002">工号002</option>
                        <option value ="工号003">工号003</option>
                        <option value ="工号004">工号004</option>
                        <option value ="工号005">工号005</option>
                        <option value ="工号006">工号006</option>
                        <option value ="工号007">工号007</option>
                        <option value ="工号008">工号008</option>
                        <option value ="工号009">工号009</option>
                    </select>
                </div>
                <el-input
                        margin="0"
                        class="tcp"
                        type="textarea"
                        maxlength="200"
                        :rows="5"
                        placeholder="请输入内容，不可超过200字"
                        v-model="text">
                </el-input>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="areaText = false">取 消</el-button>
                    <el-button type="primary" @click="sendText">确 定</el-button>
                </div>
            </el-dialog>
        </template>
    </div>
</div>
{/block}
{block name='js'}
<script>
    var that
    new Vue({
        el:'#app',
        data() {
            return {
                center: true,
                shadow: false,
                areaText: false,
                text: '',
                type: 0,
                company:'',
                num:''
            }
        },
        mounted() {
            that = this  //生成vue副本
        },
        methods: {
            sendText() {
                console.log(that.text)
                if(!this.type){
                    return
                }
                if(that.type ==3){
                    if(!this.num && this.text !=="" ){
                        that.$message("请选择服务工号");
                        return;
                    }
                    if(this.text == "" && !this.num){
                        this.areaText = false
                        that.$message("取消发布");
                        return;
                    }
                }
                if(that.type ==2){
                    if(!this.company){
                        that.$message("请选择快递公司");
                        return;
                    }
                    if(this.text == "" && !this.company){
                        this.areaText = false
                        that.$message("取消发布");
                        return;
                    }
                }
                if(this.text == "" && (that.type == 2 || that.type == 3)){
                    that.$message("请输入发布内容");
                    return;
                }
                if(this.text == "" && (that.type == 1 || that.type == 4)){
                    this.areaText = false
                    that.$message("取消发布");
                    return;
                }
                $.post('/index/index/sendMsg.html', {content: that.text, company:that.company, type:that.type, num:that.num}, function(res){
                    if(res.code == 0){
                        that.$message({
                            type: 'success',
                            message: '发布成功',

                    })
                        that.areaText = false
                        // $('.myselect').val("")
                    }else{
                        that.$message.error(res.msg);
                    }
                })
            },
            sendMsg(type) {
                this.text = ''
                this.type = type
                this.areaText = true
            },
            back() {
                window.history.go(-1)
            },
            home() {
                location.href = '/'
            },
        }
    });
</script>
{/block}